<template>
  <section class="cycle-tab">
    <section class="item"
             :class="current.code === item.code ? 'active' : ''"
             :key="index"
             :style="style"
             v-for="(item,index) in option"
             @click="handleClick(item)"
    >
      {{item.label}}
    </section>
  </section>
</template>

<script>
  export default {
    name: 'CycleTab',
    props: {
      option: {
        type: Array,
        default: () => {
          return [
            {label: '日', code: 'day'},
            {label: '周', code: 'week'},
            {label: '月', code: 'month'}
          ]
        }
      },
      initCurrent: {
        type: Object,
        default: () => {
          return {}
        }
      },
      itemStyle: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      style() {
        const obj = {}
        Object.keys(this.itemStyle).forEach(key => {
          obj[key] = this.itemStyle[key]
        })
        return obj
      }
    },
    data() {
      return {
        current: {}
      }
    },
    mounted() {
      this.current = this.option[0]
      if (JSON.stringify(this.initCurrent) !== '{}') {
        this.current = this.initCurrent
      }
    },
    methods: {
      handleClick(item) {
        this.current = item
        this.$emit('click', item)
      }
    }
  }
</script>

<style scoped>
  .cycle-tab {
    display: flex;
    align-items: center;
  }

  .item {
    text-indent: 0;
    text-align: center;
    width: .45rem;
    height: .3rem;
    line-height: .3rem;
    font-family: "Microsoft YaHei";
    background: rgba(0, 76, 144, .3);
    color: #FFF;
    font-size: .16rem;
    margin: .05rem;
    cursor: pointer;
    transition: all .3s;
    border-bottom: .01rem solid transparent;
  }

  .item:hover {
    background: rgba(0, 107, 183, 0.6);
    border-bottom: .01rem solid rgba(11, 191, 226, 1);
  }

  .active {
    background: rgba(0, 107, 183, 0.6);
    border-bottom: .01rem solid rgba(11, 191, 226, 1);
  }
</style>
